<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">

		<title>购物车</title>
	</head>
	<body>
		<div id="app">
			<cart-component></cart-component>
		</div>
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="js/jQuery/jquery-3.4.1.slim.min.js"></script>
		<script src="js/bootstrap/popper.min.js"></script>
		<script src="js/bootstrap/bootstrap.min.js"></script>
		<script src="js/vue.js"></script>

		<script>
			//局部组件的声明:购物车的标题
			const cartTitle = {
				props: ['uname'],
				template: `<div class="row justify-content-center">
							<div class="col-6  text-center bg-info py-3">
								<strong>{{uname}}的购物车</strong>
							</div>
			             </div>`
			}


			const cartTotal = {
				props: ['list'],
				template: `<div class="row justify-content-center mb-2">
							<div class="col-6  text-right bg-success py-2">
								<strong class='text-danger'>总价:{{total}}</strong> <button>结算</button>
							</div>
						  </div>`,
				computed: {
					total() {
						//计算商品的总金额
						let sum = 0;
						this.list.forEach(item => {
							sum += item.num * item.price;

						});
						return sum;
					}
				}
			}

			const cartItems = {
				props: ['list'],
				template: `<div class="row justify-content-center mt-2 ">
				<div class="col-6 text-center">
					<table class="table table-striped table-bordered  text-center mb-2">
						<thead>
							<tr>
								<td>商品名称</td>
								<td>价格</td>
								<td>数量</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody>
							<tr v-for='product in list' :key='product.id'>
								<td>{{product.name}}</td>
								<td>{{product.price}}</td>
								<td>
									<div class="input-group input-group-sm">
										<div class="input-group-prepend">
											<button class="btn btn-outline-secondary" type="button">+</button>
										</div>
										<input type="text" style='width:10px'  :value='product.num' @blur='changeNum(product.id,$event)'   class="form-control" >
										<div class="input-group-append">
											<button class="btn btn-outline-secondary" type="button">-</button>
										</div>
									</div>
								</td>
								<td>
									<button @click='del(product.id)'>删除</button>
								</td>
							</tr>							 
						</tbody>
					</table>
				</div>
			</div>`,
				methods: {
					del(id) {
						console.log(id);
						//子组件将数据传值给父组件
						this.$emit('item-delete', id);
					},
					changeNum(id,event){
					   console.log("修改数量",id,event.target.value);
					   //自定义事件,向父组件中传入数据
					   this.$emit('change-num',{id:id,num:event.target.value});
					}
					
					
				}

			}

			Vue.component("cart-component", {
				data() {
					return {
						uname: 'Haoren',
						products: [{
								id: 1001,
								name: 'java核心技术',
								price: 100,
								num: 1
							},
							{
								id: 1002,
								name: 'java从入门到放弃',
								price: 200,
								num: 1
							},
							{
								id: 1003,
								name: '27天精通java',
								price: 100,
								num: 1
							},
							{
								id: 1004,
								name: 'Java的艺术',
								price: 100,
								num: 2
							},
							{
								id: 1005,
								name: 'Java的前世今生',
								price: 100,
								num: 1
							},
							{
								id: 1006,
								name: 'Java高级编程',
								price: 100,
								num: 2
							}
						]
					}
				},
				template: `<div class="container mt-5">
								<cart-title :uname='uname'></cart-title>   
								<cart-items :list='products' @item-delete='delItems($event)' @change-num='changeNum($event)'></cart-items>
								<cart-total :list='products'></cart-total>
						   </div>`,
				components: {
					'cart-title': cartTitle,
					'cart-items': cartItems,
					'cart-total': cartTotal
				},
				methods: {
					delItems(id) {
						//根据id值,从数组中移除数据
						//1. 根据id值查询数据在数组中的下标
						let index = this.products.findIndex(item => item.id == id);
						//2. 根据索引删除数据
						this.products.splice(index, 1);
					},
					changeNum(val){
						//根据id值,找到数组中的数据,进行数据的修改
						this.products.some(item=>{
							if(item.id==val.id){
								item.num=val.num;
								//终止遍历
								return true;
							}
						});
					}
					
				}
			})

			const vm = new Vue({
				el: '#app',
				data: {

				}
			});
		</script>
	</body>
</html>
